/*
 * 行组件
 * @Author: ljb
 * @Date: 2018-04-04 17:49:02
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-09-05 17:39:50
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .line-cell {
        display: flex;
        width: 100%;
        height: @cell-height;
        line-height: @cell-height;
        border-bottom: @section-border;
        background-color: #fff;
        .icon {
            position: relative;
            width: 100*@rem-per-px;
            height: 100%;
            font-size: 0;
            & > img {
                width: 52*@rem-per-px;
                height: 52*@rem-per-px;
            }
        }
        .text {
            width: 100%;
            height: 100%;
            line-height: @cell-height;
            font-size: @main-font;
            color: @main-font-color;
            font-weight: bold;
        }
        .arrow {
            position: relative;
            width: 10%;
            & > img {
                width: 100%;
            }
        }
    }

</style>
<template>
	<div class="line-cell">

		<div
			v-if="icon"
			class="icon">
			<img
				:src="icon"
				class="level-vertical-middle"
				alt="">
		</div>
		<a
			:name="name"
			class="text text-overflow-ellipsis">
			{{ title || '我是标题' }}
		</a>
		<div
			v-if="arrow"
			class="arrow">
			<img
				:src="right_arrow"
				class="level-vertical-middle"
				alt="">
		</div>

	</div>
</template>

<script>
export default {
	name: 'LineCell',
	props: {
		title: {
			type: String,
			default() {
				return '';
			},
		},
		icon: {
			type: String,
			default() {
				return '';
			},
		},
		arrow: {
			type: Boolean,
			default() {
				return true;
			},
		},
		name: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {
			right_arrow: require('src/assets/media/img/2.3.9/arrow.png'),
		};
	},
	methods: {

	},
};
</script>
